<template>
  <div class="search">
    <div class="top_fix">
      <div class="top flex-between flex-middle">
        <SearchInput @enter="handleSearch" :placeholder="$route.query.q" v-model="searchKey" class="flex1" />
        <p class="txt" @click="$router.history.go(-1)">取消</p>
        <van-icon name="contact" size=".5rem" @click="$router.push('/singer')"/>
      </div>
    </div>
    <HistorySearch :list="historySearchKeys"/>
    <HotSearch />
  </div>
</template>

<script>
import { mapState } from "vuex";
import store from 'store2'

//component
import SearchInput from "@/components/SearchInput";
import HistorySearch from "./components/HistorySearch";
import HotSearch from "./components/HotSearch";

export default {
  data() {
    return {
      searchKey: "",
      historySearchKeys:store('historySearchKeys') || []
    };
  },
  components: {
    SearchInput,
    HistorySearch,
    HotSearch
  },
  computed: {
    ...mapState("Search", ["msg"])
  },
  mounted() {
    console.log(this.$route);
  },
  methods: {
    handleSearch(val) {
        let keyWord = val
        let storeKeys = store('historySearchKeys') || []
        if(!val){
           keyWord = this.$route.query.q || ''
        }
        storeKeys.unshift(keyWord)

        store('historySearchKeys',Array.from(new Set(storeKeys)))  //Set对数组去重
        this.$router.push('/search_result?1='+keyWord)
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  padding: 0 15px;
}
.top_fix {
  height: 55px;
}
.top {
  padding: 10px 15px;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 10;
}
.txt {
  font-size: 14px;
  color: $higColor;
  margin: 0 10px;
}
</style>